
/*** pop-up div to cover entire area ***/
.divModalDialog  {
    color: #f0f0f0;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(200,210,210,0.9);
}

/*** ! target attribute does the job ! ***/
.divModalDialog:target  { display:block; }

/*** virtual frame containing controls, image and caption ***/
.divModalDialog div{
/* either absolute or fixed */
position:fixed;
top:5%;
width:100%;
height:80%;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:102;
}

/*** header used as main image caption  ***/
.divModalDialog h1  {
width:100%;
font-size:2em;
color:#fff;
z-index:103;
/* add shadows to text */
-moz-text-shadow: 10px 3px 4px 6px rgba(0,0,0,0.9);
-webkit-text-shadow: 3px 4px 6px rgba(0,0,0,0.9);
text-shadow: 10px 4px 6px rgba(0,0,0,0.9);
}

/*** main image style ***/
.divModalDialog img {
padding:20px;
z-index:105;
border: solid 1px gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #dadada,
                                #505050 5%,
                                #bababa 50%,
                                #303030 50%,
                                #101010);
background: -webkit-gradient(linear, center top, center bottom,
                                from(#dadada),
                                color-stop(0.05, #505050),
                                color-stop(0.5, #bababa),
                                color-stop(0.5, #303030),
                                to(#101010));
}

/*** navigation controls style: highest z-index ! ***/
.divModalDialog ul a  {
padding:5px;
font-size:3em;
font-weight:bold;
color:Yellow;
text-decoration:none;
border: solid 1px Gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:110;
}

/*** div serves as thumbnais container  ***/
#divThumbnails {
position:relative;
margin: 75px 0 0 0;
height:250px;
padding-top:30px;
background-color:#cacaca;

/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
box-shadow: 5px 5px 10px rgba(50,50,50,0.7);

/* gradient effect with color-stop */
background: -moz-linear-gradient(top, #f0f0f0,
                            #bababa 10%,
                            #cacaca 49%,
                            #909090 50%,
                            #cacaca 50%,
                            #cacaca 90%,
                            #ababab);
background: -webkit-gradient(linear, center top, center bottom,
                            from(#f0f0f0),
                            color-stop(0.1, #bababa ),
                            color-stop(0.49, #cacaca),
                            color-stop(0.50, #909090),
                            color-stop(0.50, #cacaca),
                            color-stop(0.90, #cacaca),
                            to(#ababab));
}

/*** thumbnails image style ***/
#divThumbnails img {
padding:10px;
height:200px;
max-width:300px;
border: solid 1px gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
z-index:1;
}

/*** hover effects increase visual responsiveness ***/
#divThumbnails img:hover, .divModalDialog ul a:hover
{
background:#505050;
background: -moz-linear-gradient(top, #eaeaea,
                            #505050 50%,
                            #303030 50%,
                            #404040);
background: -webkit-gradient(linear, left top, left bottom,
                                    from(#eaeaea),
                                    color-stop(0.5, #505050),
                                    color-stop(0.5, #303030),
                                    to(#404040));
}

/*** fancy text effect: 180 degree ***/
#divUpsideDown  {
position: relative;
margin-top:5%;
width:100%;
ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /*	        -moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
font-size:3em;
font-weight:bold;
color:Maroon;
/* add shadows to text */
-moz-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
-webkit-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
}
